<template>
  <div class="welcome">
    {{ t('data.welcome') }}
  </div>
  <div class="load-line">
    {{ t('data.int_vel') }}
    <div
      class="upload-button"
      @click="startFileSelect(FileSendEnum.ICE)"
    >
      {{ t('data.select_file') }}
    </div>
  </div>
  <div class="load-line">
    {{ t('data.fleet') }}
    <div
      class="upload-button"
      @click="startFileSelect(FileSendEnum.FLEET)"
    >
      {{ t('data.select_file') }}
    </div>
  </div>
  <div class="load-line">
    {{ t('data.graph') }}
    <div
      class="upload-button"
      @click="startFileSelect(FileSendEnum.GRAPH)"
    >
      {{ t('data.select_file') }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';

import { useFleetStore } from '@/stores/fleet';
import { useGraphStore } from '@/stores/graph';

import { api } from '@/api';

const { t } = useI18n();


const enum FileSendEnum {
	GRAPH, ICE, FLEET
}


function startFileSelect(type: FileSendEnum) {
	const input = document.createElement('input');
	input.type = 'file';
	input.accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel';

	input.onchange = () => {
		if (input.files && input.files[0]) {
			const form_data = new FormData();
			form_data.append('file', input.files[0]);

			switch (type) {
			case FileSendEnum.FLEET:
				api.sendFleet(form_data).then(() => useGraphStore().init());
				break;
			case FileSendEnum.GRAPH:
				api.sendGraph(form_data).then(() => window.location.reload());
				break;
			case FileSendEnum.ICE:
				api.sendIntegrVelocity(form_data).then(() => useFleetStore().init());
				break;
			}

		}
	};

	input.click();
}
</script>

<style lang="scss" scoped>
.welcome {
	font-size: 20px;
	margin-bottom: 8px;
}

.load-line {
	font-size: 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 8px;

	&>.upload-button {
		cursor: pointer;
		width: fit-content;
		background: black;
		font-size: 16px;
		color: white;
		padding: 4px 8px;
	}
}
</style>